import React, {Component} from 'react';
import {Dimensions, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {Grid} from '@ant-design/react-native';
import NavBar, {NavTitle} from 'react-native-nav'
import {connect} from "react-redux";

const {height, width} = Dimensions.get('window');

class Item extends Component {
    render() {
        const textColor = this.props.selected ? "red" : "black";
        return (
            <TouchableOpacity onPress={this._onPress}>
                <View>
                    <Text style={{color: textColor}}>
                        {this.props.title}
                    </Text>
                </View>
            </TouchableOpacity>
        );
    }

}


const data =
    [{
        icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
        text: '历史记录',
        id:'History'
    } ,
    {
        icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
        text: '我的名片',
        id:'History'
    },
    {
        icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
        text: '我的收藏',
        id:'History'
    },
    {
        icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
        text: '认证信息',
        id:'History'
    },
    {
        icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
        text: '修改信息',
        id:'History'
    },
    {
        icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
        text: '提问与回答',
        id:'History'
    },

    {
        icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
        text: '我的关注',
        id:'History'
    },
    {
        icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
        text: '金币与积分',
        id:'Star'
    },
    {
        icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
        text: '获取帮助',
        id:'History'
    }]


class UserInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: []
        };
    }

    render() {
        const {
            onScroll = () => {
            }
        } = this.props;
        return (
            <ScrollView>

                <View style={styles.userImg}>

                    <Image source={require('../../../resources/images/money.png')}
                           style={{borderRadius: 25, width: 60, height: 60, margin: 10}}></Image>
                    <Text>
                        淋过雨的空气沾湿记忆
                    </Text>
                    <Text style={{fontWeight: 'bolder', fontFamily: '黑体'}}>
                        认证信息：从业者实名认证
                    </Text>
                </View>

                <Grid
                    data={data}
                    columnNum={3}
                    onPress={(el, index) => {
                        this.props.mainNavigation.push(el.id)}}
                />
            </ScrollView>


        );
    }
}


const AVATAR_SIZE = 100;
const ROW_HEIGHT = 60;
const PARALLAX_HEADER_HEIGHT = 220;
const STICKY_HEADER_HEIGHT = 76;
const styles = StyleSheet.create({

    container: {
        flex: 1,
        color: 'red'
    },

    userImg: {
        height: height * 0.3,
        backgroundColor: '#3396fb',
        justifyContent: 'center',
        alignItems: 'center'
    },

    statusBar: {
        backgroundColor:'#3396fb'
    },
    navBar: {
        backgroundColor: '#3396fb',
    },
    title: {
        flex: 1,
        color: '#rgba(0, 0, 0, 0.65)',
    },
    buttonText: {
        color: '#rgba(0, 0, 0, 0.45)',
    },
});


export default connect(
    (state) => {
        return {
            mainNavigation: state.mainNavigation
        }
    }
)(UserInfo)
